<template>
  <div
    class="app-container flex flex-sub"
    style="background: none; height: 100%; padding: 1rem"
    v-if="!isShowList"
  >
    <el-card shadow="never" class="box-card flex-sub" style="overflow: auto">
      <div class="pane-item-wrap">
        <div
          class="item-container"
          v-for="(data, index) in deviceRecordData"
          :key="index"
        >
          <!-- :class="data.warning>0?'alarm':((data.fault + data.isIsolate + data.offLine)>0?'falut':'normal')" -->
          <div
            class="item"
            :class="
              data.warning > 0
                ? 'alarm'
                : data.fault + data.isIsolate + data.offLine > 0
                ? 'falut'
                : 'normal'
            "
            @click="toClick(data)"
          >
            <div class="item-left">
              <div class="item-left-label">
                <span
                  style="
                    align-items: center;
                    justify-content: flex-end;
                    display: flex;
                    width: 35%;
                  "
                >
                  <img
                    :src="getDeviceDetailImg(data.name)"
                    alt=""
                    style="width: 16px; height: 16px"
                  />
                </span>
                <span class="item-left-text" style="flex: 1"> {{ data.name }}</span>
              </div>
              <div class="item-left-value">
                {{ data.total }}
              </div>
            </div>
            <div class="item-right">
              <div class="item-right-content">
                <div class="item-right-text">报警数量</div>
                <div class="item-right-value">
                  {{ data.warning }}
                </div>
              </div>
              <div class="item-right-content" style="margin-top: 8px">
                <div class="item-right-text">异常数量</div>

                <div class="item-right-value">
                  {{ data.fault + data.isIsolate + data.offLine }}
                </div>
              </div>
              <div class="item-right-content" style="margin-top: 8px">
                <div class="item-right-text">正常数量</div>
                <div class="item-right-value">{{ data.normal }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
  <div
    v-else
    class="app-container"
    style="background: none; width: 100%; height: 100%; padding: 1rem"
  >
    <list :deviceObj="clickedData" @back="goBack" v-if="isShowList"></list>
  </div>
</template>
<script>
import dashboardManageApi from "@/api/dashboard-manage";
import deviceManageApi from "@/api/device-manage";
import List from "./component/List";
export default {
  components: {
    List,
  },
  data() {
    return {
      deviceDictionaries: [],
      deviceRecordData: [],
      deviceDetailImg: [
        {
          烟感: "smoke_sensation",
        },
        {
          温感: "temperature_sensation",
        },
        {
          天然气: "natural_gas",
        },
        {
          手报: "hand_newspaper",
        },
        {
          水浸报警: "flooding_alarm",
        },
        {
          红外探测: "infrared_acquisition",
        },
        {
          声光报警: "audible_visual_alarm",
        },
      ],
      isShowList: false,
      clickedData: {},
    };
  },
  mounted() {
    this.getDictValueAttr(); // 设备类型
  },
  methods: {
    getDictValueAttr() {
      const data = {
        fieldName: "collect_type",
        tableName: "t_equipment_collect",
      };
      deviceManageApi.getDictValueAttr(data).then((ret) => {
        this.deviceDictionaries = ret.data.dictValue;
        this.getDeviceRecordData();
      });
    },
    getDeviceRecordData() {
      dashboardManageApi.getDeviceRecord().then((ret) => {
        if (ret.status === 200) {
          this.deviceRecordData = ret.data.data;
          this.deviceRecordData.forEach((ele) => {
            this.deviceDictionaries.forEach((item) => {
              if (ele.name == item.dictText) {
                ele.deviceType = item.dictValue;
              }
            });
          });
        }
      });
    },

    getImgSrc(imgName) {
      return require(`@/assets/home/${imgName}`);
    },
    getDeviceDetailImg(imgName) {
      let imgUrl = this.getImgSrc("other_device.png");
      this.deviceDetailImg.forEach((ele) => {
        for (const key in ele) {
          if (key == imgName) {
            imgUrl = this.getImgSrc(ele[imgName] + ".png");
          }
        }
      });
      return imgUrl;
    },

    toClick(data) {
      this.clickedData = data;
      console.log("clickedData=", this.clickedData);
      this.isShowList = true;
    },
    goBack() {
      this.isShowList = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/part-custom";
.pane-item-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  padding: 10px;
}
.item-container {
  margin-bottom: 20px;
  padding-right: 10px;
  padding-left: 10px;

  display: flex;

  flex: 1 0 100%;
  height: 140px;
  // width: 320px;
  // background: #f5f5f5;
}
@media screen and (min-width: 890px) {
  .item-container {
    flex: 0 0 50%;
  }
}
@media screen and (min-width: 1210px) {
  .item-container {
    flex: 0 0 33.3333333333%;
  }
}
@media screen and (min-width: 1530px) {
  .item-container {
    flex: 0 0 25%;
  }
}
@media screen and (min-width: 1850px) {
  .item-container {
    flex: 0 0 20%;
  }
}
@media screen and (min-width: 2170px) {
  .item-container {
    flex: 0 0 16.6666666666%;
  }
}
.item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: #f5f5f5;
  cursor: pointer;
  transition: transform 0.35s;
}
.alarm {
  background: #f56e6e;
}
.fault {
  background: rgb(244, 143, 87);
}
.normal {
  background: rgb(29, 187, 153);
}
.item:hover {
  box-shadow: 0 0 14px 3px rgba(191, 191, 191, 0.9);
  transform: scale(1.02);
}

.item-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  // align-items: center;
}
.item-left-label {
  flex: 1;
  display: flex;
  align-items: center;
}
.item-left-text {
  flex: 1;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #000000;
  margin-left: 8px;
}
.item-left-value {
  flex: 1;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #111111;
  margin-top: 15px;
  margin-left: 45%;
}
.item-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-left: 1px dashed #dcdcdc;
}
.item-right-content {
  flex: 1;
  display: flex;
}
.item-right-text {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 300;
  color: #000000;
}
.item-right-value {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 550;
  color: #000000;
  margin-left: 15px;
}
</style>
